<template>
    <el-menu
        :router=booleanTrue
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect">
            <el-menu-item index="/main" class="menu_item" >首页</el-menu-item>
            <el-menu-item index="/task" class="menu_item" >任务</el-menu-item>
            <el-menu-item index="/accInfo" class="info_item">
                <top_user_info />
            </el-menu-item>        
    </el-menu>
    <router-view></router-view>        
</template>


<script>
import top_user_info from './top_user_info.vue'
import bus from '../utils/bus'
import { onUnmounted, onBeforeMount, ref } from 'vue'
export default{
    // 组件创建时监听activeIndex
    setup(){
        const activeIndex = ref('/main')
        let booleanTrue = true
        onBeforeMount(() => {
            // console.log('on')
            // console.log(activeIndex.value)
            bus.on('index_changed', (a)=>{
            activeIndex.value = a
        })
        })
        onUnmounted(() => {
            // console.log('emit')
            // console.log(activeIndex.value)
            bus.emit('index_changed', activeIndex.value)
            bus.off('index_changed')
        })
        function handleSelect(e) {
            activeIndex.value = e
        }
        return {
            activeIndex, 
            handleSelect,
            booleanTrue
        }
        
    },
    components:{
        top_user_info
    },
    // data(){
    //     return{
    //         // activeIndex: '',
    //         booleanTrue: JSON.parse("true")
    //     }
    // },
    // methods:{
    //     handleSelect(e){
    //         this.activeIndex = e
    //     },
        
    // }
}
</script>


<style>
.menu_item{
    width: 20%;
    font-size: medium;
}
.info_item{
    width: 40%;
}

</style>
